TenMarks - iPad Asset Creation and Specs

•

TenMarks – iPad Asset Creation and Specs

TenMarks is an Online Math Company designed to support teachers with customizable curriculum

and engage students to master math through hints, videos, amplifiers and game mechanics.

After working for about a year and half as a Content Visual Designer, the UX team was looking to fill the UI Visual Designer position, during the interim, I was asked to come onboard. I collaborated with a small team comprising of the Director of UX, a UX designer and an intern back in 2013-2014. I jumped at this opportunity to help chip in although everything about this position was relatively new to me right from the concept of user flow sketches, asset creations, spec work and providing instructions to the Dev Team. I'm always curious to learn while on the job and this was yet another avenue for me to exercise my obsession over customers of our product.

Initially I was tasked with working on individual site pages for feature updates or layout changes for the desktop version of

the product. Over time, with my production skill knowledge and the training from the Engineers about the technicalities, I soon learned the ropes. Eventually, when I got more familiar with the product, I was assigned to create the font and padding specs

for the visuals for all the iPad pages created by the Director and wire framed by the UX designer.

TenMarks iPad Global Spec, 2012-2013

A sample of the Home Page and Assignment Summary pages with a clean mock, padding and font spec for each.

KEY FEATURE CONTRIBUTION FOR IPAD: During our brainstorming session in user flow sketching phase, I empathized with the student and didn't like the idea of navigating using the back button on the assignment page to get to a question they had just completed or wanted to complete. My initial sketches had a version of a list of numbers almost displayed like an enlarged calculator with a bar of color to denote if the answer attempted was correct (green), incorrect (red) or partially correct (yellow).

I created this view on the assignment summary page, so when a student looked at it, s/he could immediately know which question to go back and review. The UX team agreed with my idea and this concept was included in the wireframes and also incorporated on the Solutions Page for a better user flow.

Assignment Summary Page and Solutions Page

CHALLENGES: I not only learned the different use cases and instances for the spec work involved in building the site pages but also a huge lesson in collaborating with a new team, communicating to a Dev Team oversees in a language totally new to me that of pixels and specs :)

RESULTS: At the end of the day, I created nearly 50+ pages of spec work for all the pages of the iPad version of our product within a span of 10 days in time for the Back-to-School Launch that year. This project gave me an opportunity to learn hands-on, the study of UX design, and developed within me a love for Customer focused design. My role in UX design played perfectly with my intuitive customer centric design sensibility and consistent professional nature to find efficiencies in products and work flows.